UI-UX Design with Figma

Prerequisite

Must be an undergraduate student with a creative mindset and basic computer literacy

Course Description

Learn to design user-centered interfaces through practical projects using Figma. Create wireframes, prototypes, and conduct usability testing.

What you will learn

• - UI/UX design principles and best practices
• - Wireframing and prototyping in Figma
• - Designing for web and mobile platforms
• - Conducting user testing and applying design thinking

Course Outline

• Week 1 Introduction to UI/UX Design and Figma

  • Overview of course structure and goals
  • Importance of peer review and how to apply feedback
  • Required tools: Figma setup and workspace basics
  • What is a User Interface?
  • The Relationship Between UI and UX
  • Roles in UI/UX
  • Basic navigation and interface in Figma
  • Creating and managing projects in Figma

• Week 2 Figma Basics and Design Principles

  • Using shapes, text, and images in Figma
  • Layers, grouping, and frames in Figma
  • Introduction to vector networks in Figma
  • Setting design goals
  • Introduction to color theory
  • Introduction to font psychology
  • Basic typography in Figma
  • Basic imagery use in Figma
  • Creating basic UI elements in Figma
  • Applying design principles to Figma projects

• Week 3 Component Design and Reusability

  • Creating reusable components in Figma
  • Using and managing component variants in Figma
  • Designing buttons in Figma
  • Designing input fields in Figma
  • Designing other UI elements in Figma
  • Building a component library in Figma
  • Implementing components in design projects

• Week 4 Advanced Figma Techniques

  • Creating interactive prototypes in Figma
  • Adding interactions to prototypes in Figma
  • Managing interactions in Figma prototypes
  • Creating transition animations in Figma
  • Building a simple interactive prototype in Figma
  • Testing prototypes in Figma
  • Refining prototypes based on feedback

• Week 5 Visual Design Elements

  • Defining visual style and aesthetic for a project
  • Using color effectively in Figma
  • Using shape effectively in Figma
  • Using imagery effectively in Figma
  • Using language as a design tool in Figma
  • Designing a cohesive visual style in Figma
  • Applying look and feel to UI projects in Figma

• Week 6 Advanced Prototyping and User Flow

  • Creating complex interactions in Figma
  • Creating animations in Figma
  • Using overlays in Figma prototypes
  • Using nested components in Figma prototypes
  • Managing prototype flows in Figma
  • Developing advanced prototypes in Figma
  • Conducting usability testing with Figma prototypes

• Week 7 Collaboration and Feedback in Figma

  • Sharing designs with stakeholders using Figma
  • Using comments for feedback in Figma
  • Collaborating with team members in Figma
  • Managing version control in Figma
  • Using design history in Figma
  • Working on a collaborative design project in Figma
  • Implementing feedback from peers in Figma

• Week 8 Design Systems and Libraries in Figma

  • Principles of design systems
  • Creating a design system in Figma
  • Maintaining a design system in Figma
  • Using Figma libraries
  • Managing Figma libraries
  • Building a comprehensive design system in Figma
  • Creating and managing component libraries in Figma

• Week 9 Responsive Design with Figma

  • Principles of responsive design
  • Designing for different screen sizes in Figma
  • Using auto-layout in Figma
  • Setting constraints in Figma
  • Using grid systems in Figma
  • Designing responsive interfaces in Figma
  • Applying auto-layout techniques in Figma
  • Implementing grid systems in Figma

• Week 10 User Research and Testing

  • Conducting user research for UI projects
  • Creating user personas based on research
  • Planning usability testing for Figma prototypes
  • Conducting usability testing sessions
  • Analyzing usability test results
  • Incorporating research findings into design
  • Designing for user needs based on research

• Week 11 Advanced UI Techniques

  • Designing with accessibility in mind in Figma
  • Implementing accessibility features in Figma
  • Creating micro-interactions in Figma
  • Adding subtle animations in Figma
  • Designing for web platforms in Figma
  • Designing for mobile platforms in Figma
  • Ensuring inclusive design in Figma
  • Meeting accessibility standards in Figma designs

• Week 12 Final Project and Presentation

  • Developing a comprehensive UI project using Figma
  • Incorporating all learned techniques into the project
  • Preparing the final project presentation
  • Presenting the final project to the class
  • Receiving feedback on the final project
  • Providing feedback to peers
  • Reflecting on the design process and lessons learned
  • Discussing best practices in UI design with Figma

Grading Criteria

Particulars	Marks (%)
Quizzes	20
Class Participation/ Attendance	15
Projects	25
Final Projects	40
Total	100